/* SITE HEADERS  */

#content{
    background-color: var(--paper-warm);
    position:relative;
    border: 1px solid var(--paper-rule);
    margin: 40px auto;
    max-width: 90%;
    height:50vh;
    padding: 0rem 3rem 12rem;
    /* padding: 0px 24px 124px; */
}

/* NOTEPAD OBJECT */
.notepad{
    background: repeating-linear-gradient(
        #FFFFFF 0px 14px,
        rgba(215, 118, 136, 0.3) 14px 16px
    );
    box-shadow: -2px 2px 2px var(--paper-rule);
    max-width: fit-content;
    display:flex;
    flex-direction:column;
    padding: 4px 10px 5px 4px;
    gap:5px;
    border: 1px solid var(--paper-rule);
}
.notepad-text{
    font-family: var(--mono);
    line-height: 1.1rem;
    font-size: 1rem;
}

/* APP OBJECT */

.app{
    background-color: var(--paper);
    max-width: 500px;
    display:flex;
    flex-direction:column;
    border: 1px solid var(--paper-rule);
    font-family: var(--mono);
    height:auto;

}

.app-header{
    background-color: var(--ink);
    color: var(--paper-rule);
    padding: 0 5px 0 5px;
    font-size: 10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5px;
}

.app-body{
    background-color: var(--white);
    box-shadow: inset 2px 2px var(--paper-rule);
    color:var(--ink);
    padding: 10px;
    margin: 1em;
}

.app-link{
    text-decoration:none;
}

/* postit OBJECT */
.post-it{
    background-color: var(--butter-pale);
    border: 1px solid var(--butter);
    max-width: 250px;
    aspect-ratio: 1;
    font-family: var(--mono);
}

.post-it-header{
    background-color:var(--butter);
    text-align:center;
}

.post-it-content{
    max-width:90%;
    margin: 0 auto;
    height:100%;
    font-family: var(--serif);
}

/* LIST OBJECT */
.list{
    display: block;
    background-color:var(--white);
    padding: 10px;
    font-family: var(--sans);
    line-height:1rem;
    font-weight:300;
    border: 1px solid var(--paper-rule);
    
}


.close-btn{
    content: '✕';
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--blush);
    font-weight: 700;
}

.list h2{
    font-size: 1.2rem;
}



.close-btn:hover{
    cursor: pointer;
}

.object{
    transition:ease-in box-shadow 0.2s;
}
.object:hover{
    box-shadow: 5px 5px #000000;
}

.dot{
    background-color: green;
    width:7px;
    height: 7px;
    border-radius: 50%;
}

.gizmo-list{
    list-style:none;
    padding:0;
}

.gizmo-list li{
    padding: 1rem 0 0 1rem;
}


.wiggle-wiggle:hover{
    text-decoration: var(--ink) underline wavy;
    cursor:pointer;
}

.wiggle-wiggle:hover .hover-content-img{
    opacity: 100%;
    width: 100px;
    height:auto;
    display: block;
    transition: opacity 0.8s ease-in-out;
}

.hover-content-img{
    /* display: block; */
    opacity: 0;
    width:0;
    height: 0;
}